<!DOCTYPE html>
<html lang="ch-CN">
<head>
  <meta charset="UTF-8">
  <title>鼠标实时位置</title>
</head>
<!--  event.clientX等不适用于有滚动条的页面中
      一般页面更适合使用pageX,可以无视滚动条的影响
-->
<style>
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-color: wheat;
    font-size: 30px;
    /*文本透明*/
    /*text-decoration: none;*/
    font-family: "华文楷体";
    display: flex;
    flex-direction: column;
    /*justify-content: center;*/
    align-items: center;
    position: relative;
  }

  p {
    font-size: 40px;
    margin: 20px 0 0 0;
    font-weight: bold;
  }

  span {
    /*display: block;*/
    line-height: 50px;
  }
  #box1{
    width: 500px;
    height: 300px;
    background-color: #b3b1af;
    border: solid 1px black;
  }
  #box2{
    margin-top: 50px;
    width: 500px;
    background-color: khaki;
    border: solid 1px black;
    text-align: center;
  }

</style>
<body id="body">
<div id="box1"></div>
<div id="box2">
  <p>指针离盒子的位置</p>
</div>
</body>
<script>
let box1=document.getElementById("box1")
let box2=document.getElementById("box2")
let body=document.getElementById("body")
// 添加两个p元素到box2中用来查看当前指针对于box1的位置
let index_X=document.createElement("p")
let index_Y=document.createElement("p")
index_X.style.margin="0"
index_Y.style.margin="0"
index_X.style.fontWeight="none"
index_Y.style.fontWeight="none"
index_X.style.fontSize="30px"
index_Y.style.fontSize="30px"
box2.appendChild(index_X)
box2.appendChild(index_Y)
// 添加两个p元素到box2中用来查看当前指针对于body的位置
let index_X_body=document.createElement("p")
let index_Y_body=document.createElement("p")
index_X_body.style.margin="0"
index_Y_body.style.margin="0"
index_X_body.style.fontWeight="none"
index_Y_body.style.fontWeight="none"
index_X_body.style.fontSize="30px"
index_Y_body.style.fontSize="30px"
box2.appendChild(index_X_body)
box2.appendChild(index_Y_body)
// 添加一个div到box1中用来明确指针对于box1指向的位置
let linear=document.createElement("div")
linear.style.display="none"
linear.style.borderBottom="1px solid red";
linear.style.borderRight="1px solid red";
box1.appendChild(linear)
// 添加一个div到body中用来明确指针对于body指向的位置
let linear_body=document.createElement("div")
linear_body.style.display="none"
linear_body.style.borderBottom="1px dashed black";
linear_body.style.borderRight="1px dashed black";
linear_body.style.position="absolute"
linear_body.style.top="0"
linear_body.style.left="0"
body.appendChild(linear_body)

box1.onmousemove=function (event){
  // 用于适配火狐浏览器或者 event=event||window.event
  if (!event){
    event=window.event
  }
  // 查看当前指针对于box1的位置
  index_X.innerHTML="离盒子左侧距离："+event.offsetX
  index_Y.innerHTML="离盒子顶部距离："+event.offsetY
  linear.style.display="block"
  linear.style.height=event.offsetY+"px"
  linear.style.width=event.offsetX+"px"
}
body.onmousemove=function (event){
  // 用于适配火狐浏览器或者 event=event||window.event
  if (!event){
    event=window.event
  }
  // 查看当前指针对于body的位置
  index_X_body.innerHTML="离body左侧距离："+event.pageX
  index_Y_body.innerHTML="离body顶部距离："+event.pageY
  // index_X_body.innerHTML="离body左侧距离："+event.clientX
  // index_Y_body.innerHTML="离body顶部距离："+event.clientY
  linear_body.style.display="block"
  linear_body.style.height=event.pageY+"px"
  linear_body.style.width=event.pageX+"px"
  // linear_body.style.height=event.clientY+"px"
  // linear_body.style.width=event.clientX+"px"
}
</script>
</html>